<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="aboutus">
			<uni-forms-item name="mobile" label="联系电话">
				<uni-easyinput placeholder="联系电话" v-model="aboutus.mobile" trim="both"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="email" label="企业邮箱">
				<uni-easyinput placeholder="企业邮箱" v-model="aboutus.email" trim="both"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="QQgroup" label="交流QQ群">
				<uni-easyinput placeholder="交流QQ群" v-model="aboutus.QQgroup" trim="both"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="address" label="联系地址">
				<textarea placeholder="联系地址" @input="binddata('address', $event.detail.value)"
					class="uni-textarea-border" v-model="aboutus.address" trim="both"></textarea>
			</uni-forms-item>
			<uni-forms-item name="beianhao" label="备案号">
				<input placeholder="网安备案号" @input="binddata('beianhao', $event.detail.value)" class="uni-input-border"
					v-model="aboutus.beianhao" trim="both"></input>
			</uni-forms-item>
			<uni-forms-item name="beianhaoUrl" label="备案号目标地址">
				<input placeholder="网安备案号点击目标地址" @input="binddata('beianhaoUrl', $event.detail.value)"
					class="uni-input-border" v-model="aboutus.beianhaoUrl" trim="both"></input>
			</uni-forms-item>
			<uni-forms-item name="beiandi" label="备案地">
				<input placeholder="备案地" @input="binddata('beiandi', $event.detail.value)" class="uni-input-border"
					v-model="aboutus.beiandi" trim="both"></input>
			</uni-forms-item>
			<uni-forms-item name="beiandiUrl" label="备案地目标地址">
				<input placeholder="备案地点击目标地址" @input="binddata('beiandiUrl', $event.detail.value)"
					class="uni-input-border" v-model="aboutus.beiandiUrl" trim="both"></input>
			</uni-forms-item>
			<uni-forms-item name="copyright" label="版权声明">
				<textarea placeholder="公司版权声明" @input="binddata('copyright', $event.detail.value)"
					class="uni-textarea-border" v-model="aboutus.copyright" trim="both"></textarea>
			</uni-forms-item>

			<uni-forms-item label="aboutus文字颜色" name="footColor" labelWidth="120">
				<view class="color-box">
					<uni-easyinput placeholder="请设置轮播背景色" v-model="aboutus.footColor" trim="both" class="color-value"></uni-easyinput>
					<view class="color-border">
						<view @click="isOpenFootColor = !isOpenFootColor" class="color-show"
							:style="{'background':aboutus.footColor}">
							<uni-icons v-if="isOpenFootColor" type="top" size="25"></uni-icons>
							<uni-icons v-else type="bottom" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<v587-color-picker v-if="isOpenFootColor" v-model="aboutus.footColor" @onColorChange="pickerFootColor"
					class="color-picker" />
			</uni-forms-item>

			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submitForm">提交</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	const getconfigObj = uniCloud.importObject('getconfig', {
		loadingOptions: { // loading相关配置
			title: '处理中...', // 显示的loading内的提示文字。默认值为：加载中...
			mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
		},
		errorOptions: { // 错误界面相关配置
			type: 'toast', // 错误信息展示方式，可取值：modal（弹框，默认）、toast（toast消息框）。默认值为：modal
			retry: false // 是否展示重试按钮，仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法，默认为false
		}
	})
	export default {
		data() {
			return {
				"isOpenFootColor": false,
				"aboutus": {
					"mobile": "",
					"email": "",
					"QQgroup": "",
					"address": "",
					"beianhao": "",
					"beianhaoUrl": "",
					"beiandi": "",
					"beiandiUrl": "",
					"copyright": "",
					"footColor": ""
				}
			}
		},
		onLoad() {
			this.getData()
		},
		watch: {
			// 使用watch来响应数据的变化
			'aboutus.footColor'(newVal, oldVal) {
				if(!newVal){
					this.aboutus.footColor = oldVal
				}
			}
		},
		methods: {
			pickerFootColor(e) {
				this.aboutus.footColor = e
			},
			getData() {
				getconfigObj.getConfig().then((res) => {
					console.log("res:-----info ", res);
					this.aboutus = res.data[3]
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			submitForm() {
				console.log("this.aboutus: ", this.aboutus);
				var pattern = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
				
				if(!pattern.test(this.aboutus.footColor)){
					uni.showToast({
						title: '色值格式不正确，请重新选择或输入',
						icon:'error'
					});
					return false
				}
				getconfigObj.updateConfig({
					"_id": "aboutus",
					...this.aboutus
				}).then((res) => {
					console.log("res:-----updateAboutus ", res);
					if (res.updated) {
						uni.showToast({
							title: '更新成功！',
							icon: "none",
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '未提交更新内容！',
							icon: "none",
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log("err: ", err);
				})
			}
		}
	}
</script>

<style>
	/deep/ .uni-forms-item__label[data-v-61dfc0d0] {
		width: 80px !important;
	}

	.color-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.color-value {
		margin-right: 40rpx;
	}

	.color-border {
		width: 50px;
		height: 50px;
		border: #ddd solid 2px;
		justify-content: center;
		align-items: center;
		display: flex
	}

	.color-show {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.color-picker {
		position: absolute;
		top: 63px;
		left: 330px;
		z-index: 99;
	}
</style>
